
<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Report</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Consumption Report</i></h5>
                            </div>
                           <div class="ibox-content">
                           <form id="search_cons_form" class="form-horizontal">
                           <div class="form-group">
                                <label style="text-align: right;" class="col-lg-4 control-label">Bill Month</label>
                                <div class="col-lg-4 input-daterange input-group">
                                    <select id="con_year" class="form-control-custom">
                                      <?php
                                      $mon = array('','January','February','March','April','May','June','July','Augus','September','October','November','December');
                                      for($i = date('Y'); $i >= 2010 ; $i--):?>
                                        <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                                      <?php endfor; ?>
                                    </select>
                                    <span class="input-group-addon">-</span>
                                   <select id="con_month" class="form-control-custom">
                                      <?php for($o = 1; $o <= 12; $o++):?>
                                        <option value="<?php echo $o < 10 ? '0'.$o : $o; ?>"><?php echo $mon[$o]; ?></option>
                                      <?php endfor; ?>
                                   </select>
                                </div>
                            </div>
                           <?php foreach ($zone1 as $key): ?>
                              <div class="form-group" style="display: <?php echo ($key->enable_flag == 'N' ? 'none' : ''); ?>">
                                      <label class="col-lg-4 control-label"><?php echo $key->field_label; ?></label>
                                  <?php endforeach;?>
                                  <div class="col-lg-4">
                                    <select id="con_zone" name="zone" class="form-control chosen">
                                      <option value=""></option>
                                    <?php foreach ($zone as $key): ?>
                                        <option value="<?php echo $key->zone_value_name; ?>"><?php echo $key->zone_value_name; ?></option>
                                    <?php endforeach;?>
                                    </select>
                                  </div>
                              </div>
                           </form>
                          <center><a class="btn btn-primary btn-outline btn-md m-t-n-xs" id="get_cons" type="button"><i class="fa fa-check fa-fw"></i> Get Status</a></p></center>
                           </div><!-- END OF IBOX CONTENT -->
                           
                             <div id="result">
                                <!-- <div class="ibox-content">
                                  <div class="row">
                                      <div class="col-xs-9">
                                        <div class="btn-group">
                                          <a id="to_pdf" href="#" class="btn btn-link" ><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                          <a id="to_excel" href="#" class="btn btn-link" ><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                        </div>
                                      </div>
                                  </div>
                               </div> --><!-- END OF IBOX CONTENT -->
                               <br>
                               <p id="search_values"></p>
                               <div class="horizontal-slide">
                                <table class="dataTable table table-striped table-hover" style="width:100%;">
                                <thead>
                                  <tr>
                                    <th>Account Number</th>
                                    <th>Account Name</th>
                                    <th>Consumed m<sup>3</sup></th>
                                  </tr>
                                </thead>
                                <tbody>
                                </tbody>
                              </table>
                                <!-- <div class="table-responsive">
                                  <table class="dataTable table table-striped table-hover" style="width:100%;"> -->
                                 <!-- <table class="footable table table-bordered table-hover"> -->
                                 
                                                  
                                  <!-- <thead> -->
                                    <!-- <tr style="background-color: blue !important;"> 
                                                      <td style='border: none !important; text-align:right;'>
                                                        <strong>Total Count:<strong>
                                                      </td >
                                                      <td style='border: none !important; text-align:right;' id="total_c">
                                                      </td>
                                    </tr> -->
                                   <!--  <tr>
                                      <th data-type="numeric">Account Number</th>
                                      <th data-type="alpha">Acount Name</th>
                                      <th data-type="numeric">Consumed m<sup>3</sup></th>
                                    </tr>
                                  </thead>
                                  <tbody id="result-table">
                                    <tr>
                                    </tr>
                                  </tbody>
                                  <tfoot >
 -->                                    <!-- <tr>
                                      <td colspan="4" style='border: none !important;'>
                                        <ul class="pagination pull-left"></ul>
                                      </td>
                                    </tr> -->

                                 <!--  </tfoot>
                                </table>
                                </div> -->
                              </div>
                             </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        
    </div><!-- END of class row-->
</div>
<script>
      $(document).ready(function(){
        $(".chosen-select").chosen({width:"100%;"});


        var table = $('.dataTable').DataTable({
              "dom": 'lTgtipf',
              "scrollX": true,
              "iDisplayLength": 50,
              "tableTools": {
                  "aButtons": [{
                                  "sExtends": "xls",
                                  "sButtonText": "Export to Excel"
                              }],
                  "sSwfPath": "<?php echo base_url() ?>assets/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
              }
          });

        $('#get_cons').click(function(){
        //     $.ajax({
        //       url: "<?php echo base_url($this->session->userdata('forajax').'/search_cons'); ?>",
        //       mehod: "POST",
        //       data:{'month': $('#con_month').val() , 'year': $('#con_year').val() , 'zone' : $('#con_zone').val() },
        //       dataType:'json',
        //       success: function (data) {

        //       }
        //     });


            $.ajax({
            url: "<?php echo base_url($this->session->userdata('forajax').'/search_cons'); ?>",
            type: 'POST',
            dataType: 'json',
            data: {'month': $('#con_month').val() , 'year': $('#con_year').val() , 'zone' : $('#con_zone').val() },
            success: function(data){
              $('#get_cons').removeAttr('disabled');
              if(data.length == 0){
                table.rows().clear();
                table.draw();
              }else{
                table.rows().clear();
                $.each(data,function(i,item){
                   table.row.add( [ data[i].acct_num , data[i].acct_name, data[i].consumed ]);
                });
                table.draw();
              }
            },
            beforeSend: function(){
              $('#get_cons').attr('disabled', true);
            }
          });
        });





      });
</script>